The Library sample contained hand-rolled duplicates of components already provided by @cratis/components, and dialog forms used manual useState + PrimeReact primitives instead of the CommandForm abstraction.

Added dependency

• @cratis/components added to Library/package.json

Command dialogs rewritten with CommandForm

AddAuthor and AddBook now use CommandDialog + typed field components from @cratis/components, eliminating manual state and imperative command wiring:

// Before
const [name, setName] = useState<string>('');
const [registerAuthor] = RegisterAuthor.use();
const handleAdd = async () => { registerAuthor.name = name; await registerAuthor.execute(); ... };
// <InputText value={name} onChange={e => setName(e.target.value)} />

// After
<CommandDialog command={RegisterAuthor} visible={true} header="Register author"
    onConfirm={() => closeDialog(DialogResult.Ok)}
    onCancel={() => closeDialog(DialogResult.Cancelled)}>
    <InputTextField<RegisterAuthor> value={c => c.name} title="Name" placeholder="Name" />
</CommandDialog>

AddBook additionally uses NumberField and DropdownField for author selection.

Duplicate components removed

The following local implementations are replaced by re-exports from @cratis/components:

Each index.ts now re-exports from the package, keeping existing path-aliased imports working without changes to consumers.

Minor fixes

• DefaultLayout.tsx imports ErrorBoundary directly from @cratis/components/Common
• Authors.tsx / Inventory.tsx: added panel prop to <Page> (the @cratis/components version applies the panel CSS class conditionally); removed unused DialogResult imports

• Fixes Swap out components in Library sample #376

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.